<template>
  <el-card class="box-card">
    <div id="countChart" style="width: 500px; height: 500px">

    </div>
  </el-card>
</template>

<script>
  import * as echarts from 'echarts/core';
  import {
    TitleComponent,
    TooltipComponent,
    LegendComponent
  } from 'echarts/components';
  import {PieChart} from 'echarts/charts';
  import {LabelLayout} from 'echarts/features';
  import {CanvasRenderer} from 'echarts/renderers';
  import {getAction} from "../../axios/HttpUtils";

  echarts.use([
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    PieChart,
    CanvasRenderer,
    LabelLayout
  ]);



  export default {
    name: "UserCount",
    created() {
      this.loadData();
    },
    methods:{
      loadData(){
        getAction("/user/countAllUserNumber").then(res =>{
          var listMap = res.result;
          var chartDom = document.getElementById('countChart');
          var myChart = echarts.init(chartDom);
          var option;

          option = {
            title: {
              text: '用户数据统计',
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              // containLabel: true
            },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          };
          option.series[0].data = listMap;
          myChart.clear();
          myChart.setOption(option);
          console.log(listMap);
        })
      }
    },
    data(){
      return {
        countNum:[]
      }
    }
  }
</script>

<style scoped>
  #countChart {
    width: 100%;
    height: 100%;
  }
  .box-card {
    width: 500px;
    height: 500px;
  }
</style>
